<template>
  <div>
    页面
    <p>{{ count }}</p>
    <button @click="count++">count ++</button>
    <button @click="handClickAdd">count ++</button>
    <div>============================</div>
    <!-- <h3>姓名：{{obj.name}}，年龄：{{obj.age}}，性别：{{obj.sex}}</h3> -->
    <h3>姓名：{{name}}，年龄：{{age}}，性别：{{sex}}</h3>
    <button @click="obj.age++">age ++</button>

    <div>============================</div>
    <p>{{ o.name.a.b }}</p>
    <button @click="o.name.a.b++">+ +</button>
    <div>============================</div>
    <button>点我</button>
    
  </div>
</template>

<script setup>
import { reactive, ref, toRefs, watch } from 'vue';

// ref定义的变量/值/数组  通过.value获取进行操作
const count = ref(0)

const handClickAdd = () =>{
  count.value++
}

const obj = reactive({
  name: '张三',
  age: 18,
  sex: '男'
})

const { name, age, sex} = { ...toRefs(obj) }

const o = ref({
  name: {
    a: {
      b: 100
    }
  }
})

// 第一个参数是监听的值
// 第二个参数是箭头函数，有两个参数，第一个参数表示新的值，第二个参数表示旧的值
// watch(count, (newValue, oldValue)=>{
//   console.log(`count 从${oldValue}变成了${newValue}`);
// }, {
//   immediate: true
// })

watch(o, (newValue, oldValue)=>{
  console.log(`count 从${oldValue}变成了${newValue}`);
}, {
  immediate: true, // 进入页面渲染时就进行监听
  deep: true // 监听深层数据（数据层大于等于2层）
})




</script>


<style lang="scss" scoped>

</style>